<template>
    <!-- 顶部 -->
    <div class="topTitle">
        福利-每日领券
    </div>
    <div class="topk">.</div>
    <!-- 签到领券 -->
    <div class="bonu">
        <div class="msg">超多福利点击就送</div>
        <div class="grids">
            <div class="itemG" v-for="i in 15" :key="i">
                <img :src="BonusTag" />
                <div class="bonusTEXT">第{{ i }}天</div>
            </div>
        </div>
        <div class="butt">
            <button>立即签到</button>
        </div>
        <div class="questList">
            <div class="itemQ" v-for="(item, index) in qlists" :key="index">
                <div class="itemqq">
                    <img :src="qli" />
                    <div>
                        <div>{{ item.name }}</div>
                        <div class="itemprize">{{ item.prize }}</div>
                    </div>
                </div>
                <div class="qbutt"><button>去完成</button></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import BonusTag from '../../assets/Bonus/BonusTag.png'
import qli from '../../assets/Bonus/quest-list-icon.svg'
let qlists = [
    { name: '今日完成一次抽卡', prize: '1透视卡' },
    { name: '邀请一位新用户', prize: '1提示卡' },
    { name: '今日完成三次抽卡', prize: '2透视卡' },
    { name: '邀请两位新用户', prize: '3提示卡' },
    { name: '今日完成五次抽卡', prize: '3透视卡' },
    { name: '邀请三位新用户', prize: '5提示卡' },
]
</script>

<style lang="scss" scoped>
.topTitle {
    text-align: center;
    font-weight: 600;
    padding: 1em 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999
}

.msg {
    margin-top: 5vh;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    padding: 1em 0;
    color: rgb(124, 109, 254);
}

.topk {
    text-align: center;
    padding: 1em 0;
}

.bonu {
    background-image: url(../../assets/Bonus/BonusBG.png);
    background-size: 100% auto;
    background-repeat: repeat;
    width: 99%;
    padding: 1em 0;
}

.questList {
    margin-top: 18vh;
    width: 100%;
    margin-bottom: 8vh;
}

.qbutt button {
    background-color: red;
    font-size: small;
    border: 0;
    border-radius: 15px;
    padding: 7px 15px;
    color: #fff;
}

.itemprize {
    color: red;
    font-size: x-small;
}

.itemQ {
    width: 81%;
    text-align: center;
    margin: 3vh auto;
    display: flex;
    justify-content: space-between;
}

.itemqq {
    display: flex;
    align-items: center;
    text-align: left;
}

.itemqq img {
    margin-right: 1em;
}

.grids {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.itemG {
    text-align: center;
}

.bonusTEXT {
    font-size: 0.8em;
    color: rgb(145, 145, 145);
}

.butt {
    width: 40vh;
    margin: 4vh auto;
}

.butt button {
    width: 100%;
    background-color: rgb(124, 109, 254);
    border: 0;
    border-radius: 20px;
    color: rgb(246, 246, 246);
    padding: 0.5em 0;
}
</style>